<template>
  <div class="person">
    <h2>姓名：{{name}}</h2>
    <h2>年龄：{{age}}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">年龄+1</button>
    <button @click="showTel">点我查看联系方式</button>
  </div>
</template>

<!-- setup 语法糖 -->
<script lang="ts" setup name="person123">
    import { ref } from 'vue';
     // name和age是一个RefImpl的实例对象，简称ref对象，它们的value属性是响应式的。
    let name = ref('张三')
    let age = ref(18)
    // tel就是一个普通的字符串，不是响应式的
    let tel = '52063'

    // 方法
    function changeName() {
       // JS中操作ref对象时候需要.value
      name.value = 'zhang-san' 
      console.log(name.value);
      
    }
    function changeAge() {
      age.value += 1 
      console.log(age.value); 
    }
    function showTel() {
      alert(tel)

    }

</script>

<style scoped>

    .person{
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
    button{
        margin: 0 5px;
    }
</style>